<template>
  <div class="container">
      <el-row>
        <el-col :span="20">
          <i class="el-icon-s-promotion"></i>
          <el-tag>实验项目</el-tag>
          <i class="el-icon-s-promotion"></i>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4" v-for="(exp,index) in Testinfo" :key="index" :offset=5>
          <el-card :body-style="{ padding: '1px' }" shadow="hover">
            <div class="img_div">
              <img src="../assets/img/yuhuo.jpg" class="image">
              <a href="">
                <div class="mask">
                  <h3>{{exp.setId }} : {{ exp.setName}}</h3>
                  <p>实验开始时间：</p>
                  <p>{{exp.startTime}}</p>
                  <hr>
                  <p>实验截止时间：</p>
                  <p>{{exp.overTime}} </p>
                </div>
              </a>
            </div>
            <div style="padding:14px;">
                <span>{{exp.name}}</span>
                <div class="bottom clearfix">
                  <span>{{ exp.setName}}</span>
                  <p>实验截止时间：</p>
                  <p>{{exp.overTime}} </p>
                  <hr>
                  <time class="time">{{ currentYear }} / {{ currentMon }} / {{ currentDay }}</time>
                  <el-button type="text" class="button">开始实验</el-button>
                </div>
              </div>

          </el-card>
        </el-col>
      </el-row>
    <h1 style="color:silver  ;font-size: 20px">{{roles === 'admin' ? 'Welcome to the Backstage Management System' : ''}}</h1>
    <p style="font-size: 20px">{{Testinfo === '' ? '无题目集' : ''}}</p>
  </div>

</template>
<script>
export default {
  data () {
    return {
      // 现在时间
      currentYear: new Date().getFullYear(),
      currentMon: new Date().getMonth() + 1,
      currentDay: new Date().getDate(),
      // 实验信息
      Testinfo: [],
      roles: localStorage.getItem('role')
    }
  },
  created () {
    this.getUsertest()
  },
  methods: {
    async getUsertest () {
      // console.log(roles)
      if (this.roles === 'student') {
        const { data: res } = await this.$http.get('/student/allTestSet/' + localStorage.getItem('username'))
        console.log(res)
        if (res.status !== 200) {
          this.Testinfo = ''
          return this.$message.error(res.msg)
        }
        this.Testinfo = res.data.set
      } else if (this.roles === 'teacher') {
        const { data: res } = await this.$http.get('/teacher/allTestSet/' + localStorage.getItem('username'))
        console.log(res)
        if (res.status !== 200) {
          this.Testinfo = ''
          return this.$message.error(res.msg)
        }
        this.Testinfo = res.data.set
      } else {
        this.Testinfo = ''
      }
    }
  }
}
</script>

<style lang="less" scoped>
  /*  实验页面*/
  .el-card{
    margin-top: 60px;
    margin-left: -120px;
    width: 290px;
    height: 420px;
    display:inline-block;
  }
  .time {
    font-size: 13px;
    color: #999;
  }
  .el-tag{
    font-size: 30px;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    margin-left: 8%;
    width: 250px;
    /*width: 100%;*/
    height: 250px;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .img_div {
    position: relative;
    width: 250px;
    height: 250px;
    /*width: 100%;*/
    display:inline-block;
  }
  .mask {
    position: absolute;
    top: 0;
    left: 20px;
    width: 250px;
    height: 250px;
    /*width: 100%;*/
    background: rgba(101, 101, 101, 0.6);
    color: #ffffff;
    opacity: 0;
  }
  .mask h3 , p {
    text-align: center;
    margin-top: 7%;
  }
  .img_div a:hover .mask {
    opacity: 1;
  }
</style>
